<template>
  <div class="absolute left-0 top-20 z-10 bg-white border-r border-gray-200 flex flex-col transition-all duration-300"
       :class="isCollapsed ? 'w-12' : 'w-80'">
    <!-- 面板头部 -->
    <div class="border-b border-gray-200 flex items-center justify-between">
      <!-- 展开状态：显示选项卡 -->
      <div v-if="!isCollapsed" class="flex flex-1">
        <button 
          @click="activeTab = 'tools'"
          :class="[
            'flex-1 px-4 py-3 text-sm font-medium transition-colors',
            activeTab === 'tools' 
              ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50' 
              : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
          ]"
        >
          工具
        </button>
        <button 
          @click="activeTab = 'library'"
          :class="[
            'flex-1 px-4 py-3 text-sm font-medium transition-colors',
            activeTab === 'library' 
              ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50' 
              : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
          ]"
        >
          素材库
        </button>
      </div>
      
      <!-- 收缩状态：只显示图标 -->
      <div v-else class="flex flex-col items-center py-2 space-y-2">
        <button 
          @click="activeTab = 'tools'"
          :class="[
            'p-2 rounded transition-colors',
            activeTab === 'tools' 
              ? 'text-blue-600 bg-blue-50' 
              : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
          ]"
          :title="'工具'"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.122 2.122"></path>
          </svg>
        </button>
        <button 
          @click="activeTab = 'library'"
          :class="[
            'p-2 rounded transition-colors',
            activeTab === 'library' 
              ? 'text-blue-600 bg-blue-50' 
              : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
          ]"
          :title="'素材库'"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
          </svg>
        </button>
      </div>
      
      <!-- 展开/收缩按钮 -->
      <button 
        @click="toggleCollapse"
        class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors"
        :title="isCollapsed ? '展开面板' : '收缩面板'"
      >
        <svg v-if="isCollapsed" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
        <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
        </svg>
      </button>
    </div>

    <!-- 面板内容 -->
    <div v-if="!isCollapsed" class="flex-1 overflow-y-auto">
      <!-- 工具面板 -->
      <div v-if="activeTab === 'tools'" class="p-4 space-y-4">
        <!-- 基础工具 -->
        <div class="space-y-2">
          <h3 class="text-sm font-medium text-gray-900">基础工具</h3>
          <div class="grid grid-cols-2 gap-2">
            <button 
              @click="selectTool('select')"
              :class="[
                'p-3 rounded-lg flex flex-col items-center space-y-1 transition-colors',
                selectedTool === 'select' 
                  ? 'border-2 border-blue-500 bg-blue-50' 
                  : 'border border-gray-200 hover:border-gray-300 hover:bg-gray-50'
              ]"
            >
              <svg class="w-6 h-6" :class="selectedTool === 'select' ? 'text-blue-600' : 'text-gray-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.122 2.122"></path>
              </svg>
              <span class="text-xs font-medium" :class="selectedTool === 'select' ? 'text-blue-600' : 'text-gray-600'">选择</span>
            </button>
            <button 
              @click="selectTool('move')"
              :class="[
                'p-3 rounded-lg flex flex-col items-center space-y-1 transition-colors',
                selectedTool === 'move' 
                  ? 'border-2 border-blue-500 bg-blue-50' 
                  : 'border border-gray-200 hover:border-gray-300 hover:bg-gray-50'
              ]"
            >
              <svg class="w-6 h-6" :class="selectedTool === 'move' ? 'text-blue-600' : 'text-gray-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"></path>
              </svg>
              <span class="text-xs font-medium" :class="selectedTool === 'move' ? 'text-blue-600' : 'text-gray-600'">移动</span>
            </button>
          </div>
        </div>

        <!-- 绘制工具 -->
        <div class="space-y-2">
          <h3 class="text-sm font-medium text-gray-900">绘制工具</h3>
          <div class="grid grid-cols-2 gap-2">
            <button 
              @click="selectTool('wall')"
              :class="[
                'p-3 rounded-lg flex flex-col items-center space-y-1 transition-colors',
                selectedTool === 'wall' 
                  ? 'border-2 border-blue-500 bg-blue-50' 
                  : 'border border-gray-200 hover:border-gray-300 hover:bg-gray-50'
              ]"
            >
              <svg class="w-6 h-6" :class="selectedTool === 'wall' ? 'text-blue-600' : 'text-gray-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17v4a2 2 0 002 2h4M15 7l2-2"></path>
              </svg>
              <span class="text-xs font-medium" :class="selectedTool === 'wall' ? 'text-blue-600' : 'text-gray-600'">墙体</span>
            </button>
            <button 
              @click="selectTool('room')"
              :class="[
                'p-3 rounded-lg flex flex-col items-center space-y-1 transition-colors',
                selectedTool === 'room' 
                  ? 'border-2 border-blue-500 bg-blue-50' 
                  : 'border border-gray-200 hover:border-gray-300 hover:bg-gray-50'
              ]"
            >
              <svg class="w-6 h-6" :class="selectedTool === 'room' ? 'text-blue-600' : 'text-gray-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
              </svg>
              <span class="text-xs font-medium" :class="selectedTool === 'room' ? 'text-blue-600' : 'text-gray-600'">房间</span>
            </button>
          </div>
        </div>

        <!-- 测量工具 -->
        <div class="space-y-2">
          <h3 class="text-sm font-medium text-gray-900">测量工具</h3>
          <div class="grid grid-cols-2 gap-2">
            <button 
              @click="selectTool('measure')"
              :class="[
                'p-3 rounded-lg flex flex-col items-center space-y-1 transition-colors',
                selectedTool === 'measure' 
                  ? 'border-2 border-blue-500 bg-blue-50' 
                  : 'border border-gray-200 hover:border-gray-300 hover:bg-gray-50'
              ]"
            >
              <svg class="w-6 h-6" :class="selectedTool === 'measure' ? 'text-blue-600' : 'text-gray-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
              </svg>
              <span class="text-xs font-medium" :class="selectedTool === 'measure' ? 'text-blue-600' : 'text-gray-600'">测量</span>
            </button>
            <button 
              @click="selectTool('annotate')"
              :class="[
                'p-3 rounded-lg flex flex-col items-center space-y-1 transition-colors',
                selectedTool === 'annotate' 
                  ? 'border-2 border-blue-500 bg-blue-50' 
                  : 'border border-gray-200 hover:border-gray-300 hover:bg-gray-50'
              ]"
            >
              <svg class="w-6 h-6" :class="selectedTool === 'annotate' ? 'text-blue-600' : 'text-gray-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
              </svg>
              <span class="text-xs font-medium" :class="selectedTool === 'annotate' ? 'text-blue-600' : 'text-gray-600'">标注</span>
            </button>
          </div>
        </div>
      </div>

      <!-- 素材库面板 -->
      <div v-if="activeTab === 'library'" class="p-4 space-y-4">
        <div class="space-y-2">
          <h3 class="text-sm font-medium text-gray-900">家具分类</h3>
          <div class="space-y-1 flex flex-wrap ">
            <button 
              v-for="category in furnitureCategories" 
              :key="category.id"
              @click="selectCategory(category.id)"
              :class="[
                'w-full px-3 py-2 text-left text-sm rounded-md transition-colors w-1/4',
                selectedCategory === category.id 
                  ? 'bg-blue-50 text-blue-700 border border-blue-200' 
                  : 'text-gray-700 hover:bg-gray-50'
              ]"
            >
              {{ category.name }}
            </button>
          </div>
        </div>

        <div class="space-y-2">
          <h3 class="text-sm font-medium text-gray-900">家具列表</h3>
          <div class="grid grid-cols-2 gap-2">
            <div 
              v-for="item in furnitureItems" 
              :key="item.id"
              @click="selectFurniture($event,item)"
              class="p-2 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-colors"
            >
              <div class="w-full h-24 rounded mb-2 flex items-center justify-center overflow-hidden">
                <img :src="item.thumbnail" alt="家具图片" class="max-w-full max-h-full object-contain">
              </div>
              <p class="text-xs text-gray-700 text-center">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useToolStore, useLibraryStore, usePanelStore, usePlacementStore } from '@/stores'

// Pinia Stores
const toolStore = useToolStore()
const libraryStore = useLibraryStore()
const panelStore = usePanelStore()
const placementStore = usePlacementStore()

// 响应式数据
const activeTab = ref('tools')

// 从 store 获取面板状态
const isCollapsed = computed(() => panelStore.leftPanelCollapsed)

// 计算属性 - 从Pinia获取数据
const selectedTool = computed(() => toolStore.currentTool)
const furnitureCategories = computed(() => libraryStore.categories)
const selectedCategory = computed(() => libraryStore.selectedCategory)
const furnitureItems = computed(() => libraryStore.getItemsByCategory(selectedCategory.value))

// 方法
const selectTool = (tool) => {
  toolStore.setCurrentTool(tool)
  console.log('选择工具:', tool)
}

const selectCategory = (categoryId) => {
  libraryStore.setSelectedCategory(categoryId)
  console.log('选择分类:', categoryId)
}

const selectFurniture = ($event, item) => {
  console.log('触发点击事件',$event);
  libraryStore.selectItem(item)
  // 进入放置模式
  placementStore.startPlacement(item)
  // 切到选择工具，后续由画布交互完成拖放
  toolStore.setCurrentTool('select')
  // 触发点击事件
  
  
}

const toggleCollapse = () => {
  panelStore.toggleLeftPanel()
}
</script>

<style scoped>
/* 左侧面板样式 */
</style>
